<template>
  <el-dialog
    ref="myDialog"
    :before-close="handleClose"
    class="dialog-box animate__animated"
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    @keyup.enter="sendFn"
  >
    <div class="img animate__animated animate__bounce animate__delay-1s">
      <div
        class="marquee-text"
        v-for="(item, index) in detailList"
        :key="index"
        :style="`top: ${index * 20}px; animation-delay: ${index}s;color: ${
          item.color !== 'vip' ? item.color : ''
        }`"
      >
        <span :class="item.color === 'vip' ? 'glow-text' : ''">
          {{ item.message }}
        </span>
      </div>
      <img :src="'data:image/png;base64,' + img" alt="" />
    </div>

    <div class="comment-list" ref="commentListRef">
      <div class="list-item" v-for="(item, index) in detailList" :key="index">
        <div class="name-time">
          <div class="name">{{ item.createUserName }}</div>
          <div class="time">{{ item.createTime }}</div>
        </div>
        <div class="comment">{{ item.message }}</div>
      </div>
    </div>

    <div style="padding: 5px 40px">
      弹幕颜色：
      <el-radio-group v-model="color" class="ml-4">
        <el-radio label="#000" size="large">
          <span style="color: #000">黑色</span>
        </el-radio>
        <el-radio label="#41d31c" size="large">
          <span style="color: #41d31c">绿色</span>
        </el-radio>
        <el-radio label="#f56c6c" size="large">
          <span style="color: #f56c6c">红色</span></el-radio
        >
        <el-radio label="vip" size="large">
          <span class="glow-text">发光色</span></el-radio
        >
      </el-radio-group>
    </div>
    <div style="padding: 5px 40px">
      <el-input
        v-model="message"
        :rows="4"
        type="textarea"
        maxlength="30"
        show-word-limit
        placeholder="留个言吧！"
      />
      <div style="text-align: right; padding: 10px 0">
        <el-button type="primary" @click="sendFn" @keyup.enter="sendFn">
          发送
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script type="link">
import { insertComment, queryCommentSingle } from '@/api/content.js'
export default {
  components: {
  },
  data () {
    return {
      visible: false, // 图片列表
      color: '#000',
      img: '',
      message: '',
      detailList: [], // 评论详情列表
      row: {}
    };
  },
  mounted () {
  },
  methods: {
    showFn (row) {
      this.visible = true
      console.log(row)

      this.row = row
      this.queryCommentSingleFn() // 查询单个图片的评论
      this.$nextTick(() => {
        const dialogElement = document.querySelector('.dialog-box');
        if (dialogElement) {
          dialogElement.classList.add('animate__zoomInUp');
        }
      });
    },
    handleClose (done) {
      const dialogElement = document.querySelector('.dialog-box');
      if (dialogElement) {
        dialogElement.classList.add('animate__zoomOutDown');
      }
      setTimeout(() => {
        done();
      }, 1000); // 动画持续时间
    },
    queryCommentSingleFn () {
      const userId = sessionStorage.getItem('userId')
      queryCommentSingle({
        productId: this.row.id,
        createUserId: userId
      }).then(res => {
        console.log(res)
        if (res.success) {
          this.detailList = res.data.detailList
          this.img = res.data.image
          this.showBarrage();
        }
      })
    },
    showBarrage () {
      const marqueeElements = document.querySelectorAll('.marquee-text');
      marqueeElements.forEach((element, index) => {
        setTimeout(() => {
          element.style.opacity = 1; // 显示弹幕
        }, index * 1000); // 每隔1秒显示一个弹幕
      });
    },
    // 发送评论
    sendFn () {
      if (!this.message) {
        this.$message({
          type: 'warning',
          message: '请输入评论内容!'
        })
        return
      }
      const userId = sessionStorage.getItem('userId')
      insertComment({
        productId: this.row.id,
        createUserId: userId,
        message: this.message,
        color: this.color
      }).then(res => {
        if (res.success) {
          this.message = ''
          this.queryCommentSingleFn()
          this.enchantScrollToTop()
        }
      })
    },
    // 回到顶部
    enchantScrollToTop () {
      const commentListElement = this.$refs.commentListRef;
      if (commentListElement) {
        commentListElement.scrollTop = 0; // 这就是魔法发生的地方
      }
    }
  }
};
</script>

<style scoped>
.dialog-box {
  background: rgba(0, 0, 0, 0.8);
}
.img {
  position: relative;
  width: 80%;
  margin: auto;
}
img {
  width: 100%;
}
.comment-list {
  padding: 5px 40px;
  max-height: 300px;
  overflow-y: auto;
}

.list-item {
  padding: 5px 0 15px 0;
}
.name {
  padding: 3px 0;
  font-size: 14px;
  font-weight: bold;
  color: #eaab39;
}
.time {
  font-size: 12px;
  color: #959292;
}
.comment {
  padding: 10px 20px 0 20px;
}

.img {
  position: relative;
  overflow: hidden;
}

.marquee-text {
  position: absolute;
  white-space: nowrap;
  opacity: 0; /* 初始时设置透明度为0，隐藏弹幕 */
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: -100%;
    opacity: 0;
  }
}
@keyframes glowing {
  0% {
    text-shadow: 0 0 5px #ea1d1d; /* 初始状态 */
    color: #ff0;
  }
  50% {
    text-shadow: 0 0 20px #ea1d1d; /* 中间状态，增加发光强度 */
    color: #fff;
  }
  100% {
    text-shadow: 0 0 5px #ea1d1d; /* 结束状态，回到初始状态 */
    color: #ff0;
  }
}
.glow-text {
  animation: glowing 2s infinite; /* 应用动画效果，2秒循环一次 */
  color: #fff;
}
</style>